<template>
  <div>
    <CommonFilter
      :filter-config="filterConfig"
      :value="filterForm"
      @search-query="handleQuery"
    />
    <el-card v-loading="loading">
      <div style="padding: 10px; display: flex; justify-content: flex-end">
        <el-button :disabled="list.length == 0" type="primary" icon="el-icon-download" @click="exportOrders">导出订单</el-button>
        <el-button :disabled="ids.length == 0" type="primary" @click="showCancelOrderDialog">作废订单</el-button>
      </div>
      <CommonList
        :list="list"
        :list-config="listConfig"
        :pagination="pagination"
        @selection-change="onSelectedChange"
        @list-query="listQuery"
        @go-detail="detail"
        @go-price="price"
        @show-record-dialog="record"
        @show-order-audit-dialog="showOrderAuditDialog"
      />
    </el-card>
    <CommonDialog
      :visible.sync="orderAuditDialogVisible"
      :dialog-config="orderAuditDialogConfig"
      :value="orderAuditRuleForm"
      :cur-item="{goodsOptCode: 111}"
      @submit="orderAudit"
    />
    <CommonDialog
      :visible.sync="cancelOrderDialogVisible"
      :dialog-config="cancelOrderDialogConfig"
      :value="cancelOrderRuleForm"
      :cur-item="{goodsOptCode: 111}"
      @submit="optCancelOrder"
    />
  </div>
</template>

<script>
import CommonFilter from '@/components/Custom/CommonFilter'
import CommonList from '@/components/Custom/CommonList'
import CommonDialog from '@/components/Custom/CommonDialog'
import getFilterParams from './getFilterParams'
import getChannelListParams from './getChannelListParams'
import getCancelOrderDialogParams from './getCancelOrderDialogParams'
import getOrderAuditDialogParams from './getOrderAuditDialogParams'

import { getChannelList } from '@/api/orders/channelList'

export default {
  name: 'ChannelList',
  components: {
    CommonFilter,
    CommonList,
    CommonDialog
  },
  mixins: [getFilterParams, getChannelListParams, getCancelOrderDialogParams, getOrderAuditDialogParams],
  data() {
    return {
      loading: false,
      list: [],
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100]
      }
    }
  },
  mounted() {
    this.queryChannelList()
  },
  methods: {
    handleQuery() {
      this.pagination.pageNum = 1
      this.queryChannelList()
    },
    listQuery(obj) {
      this.pagination = { ...this.pagination, ...obj }
      this.queryChannelList()
    },
    queryChannelList() {
      this.loading = true
      const { pageNum, pageSize } = this.pagination
      const params = { ...this.filterForm, pageNum, pageSize }
      getChannelList(params).then(res => {
        const { code, data } = res
        if (code === 20000) {
          const { list = [], total = 0 } = data || {}
          this.list = list
          this.pagination.total = total
        }
        this.loading = false
      })
    },
    exportOrders() {
      // todo
    },
    showCancelOrderDialog() {
      this.cancelOrderDialogVisible = true
    },
    optCancelOrder() {
      // todo
    },
    record() {
      // todo
    },
    orderAudit(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>
